Element

2024-07-06 21:49| 来源: 网络整理| 查看: 265

Element-Ui 表格展开的图标改为自定义图标

官方：在这里插入图片描述实现效果：可以换成自己需要的图片或者文字 1.添加css隐藏原有箭头图标：

/* 隐藏原有箭头图标 */ .el-table__expand-column .cell { display: none; }

2.引入自定义图标（可换成文字） / 给图标加判断条件和单击触发事件：

3.添加判断控制图标显示隐藏给每一行表格数据添加expansion属性，默认false

我这是后台请求回来的数据在这里插入图片描述 4、添加事件控制

methods:{ expend (row) { this.masterList.map((item) => { console.log(row.id, item.id) if (row.id != item.id) { this.$refs.topicTable.toggleRowExpansion(item, false)//需在table上添加 item.expansion = false } else { item.expansion = !item.expansion } }) this.$refs.topicTable.toggleRowExpansion(row); }, },

5、在table上添加： ref=“topicTable” 在这里插入图片描述

【本文地址】

公司简介

联系我们